<template>
  <div class="wrap">
    <img src="@/assets/login-icon.png">
      <input type="text" placeholder="请输入账号" v-model="data.username">
      <input type="text" placeholder="请输入密码" v-model="data.password">
       <input type="text" placeholder="再次入密码" v-model="data.rpassword">
        <input type="text" placeholder="输入昵称" v-model="data.nickname">
      <div class="loginbtn" @click="register">立即注册</div>
      <p><router-link to="login">已有账号去登录</router-link></p> 
  </div>
</template>
<script>
import { reactive } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

const Register = ()=>{
  const router = useRouter()
  // 定义了data数据
  const data = reactive({username:'',password:'',rpassword:'',nickname:''})
  const register = async ()=>{
    if(!data.username||!data.password||!data.rpassword||!data.nickname){
      alert("注册信息不完整！")
    }
    const res=await axios({
        method:"post",
        url:"http://localhost:8888/users/register" ,
        data:'username='+data.username+'&password='+data.password+'&rpassword='+data.rpassword+'&nickname='+data.nickname,
        headers:{"Content-Type":'application/x-www-form-urlencoded'}
    })
    // 注册成功
    if (res.data.code===1) {
        router.push("login")
    }
      // 注册失败
    if (res.data.code===0) {
        alert(res.data.message)
    }
  }
  return {register,data}
}
export default {
  name:"registerView",
  setup() {
     const {register,data} =Register()
     return {register,data}
  }
}

</script>
<style lang="scss" scoped>
  .wrap{
    width: 2.95rem;
    height:5rem;
    // background-color: orange;
    padding-top: 1rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    img{
      width: .66rem;
      height: .66rem;
      margin-bottom: .2rem;
    }
    input{
      width: 100%;
      height: 48px;
      border:.02rem solid rgb(228, 228, 228);
      margin-top: .16rem;
      font-size: .16rem;
      color: #555;
      border-radius: .05rem;
      text-indent: .2rem;
    }
     p{
      margin-top: .15rem;
      a{
      color: #888;
       font-size: .14rem;
       text-decoration: none;
      }
    }
    .loginbtn{
       width: 100%;
      height: .48rem;
      margin-top: .2rem;
      color: #222;
      background-color: #ffcc00;
      text-align: center;
      font-size: .16rem;
      line-height: .48rem;
    }
  }
</style>